<mat-form-field class="omv-flex-1"
                [formGroup]="formGroup">
  <mat-label>{{ config.label | transloco | template:pageContext }}</mat-label>
  <mat-form-code-editor [formControlName]="config.name"
                        [autofocus]="config.autofocus"
                        [required]="config.validators?.required"
                        [language]="config.language"
                        [lineNumbers]="config.lineNumbers">
  </mat-form-code-editor>
  <mat-error *ngIf="formGroup.invalid">
    <span *ngIf="formGroup.hasError('required', config.name)">
      {{ 'This field is required.' | transloco }}
    </span>
    <span *ngIf="formGroup.hasError('constraint', config.name)">
      {{ formGroup.getError('constraint', config.name) | transloco }}
    </span>
    <span *ngIf="formGroup.hasError('pattern', config.name)">
      {{ formGroup.getError('pattern', config.name) | transloco }}
    </span>
  </mat-error>
  <mat-hint *ngIf="config.hint?.length > 0"
            [innerHTML]="config.hint | transloco | template:pageContext | sanitizeHtml">
  </mat-hint>
</mat-form-field>
